<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
		<title>题目详情</title>
		<meta name="keywords" content="题目详情" />
		<meta name="description" content="题目详情" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
		<!-- 百度 CDN: -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<!-- <script type="text/javascript" src="js/zepto.min.js"></script> -->
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<script type="text/javascript" src="js/jquery-labelauty.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<style>
			#category {width:100%;display: inline;white-space: nowrap;overflow-x:scroll;float:left;overflow-y:hidden;}
		#category li{display:inline-block;}
		
		ul { list-style-type: none;}
		li { display: inline-block;}
		li { margin: 10px 0;}
		input.labelauty + label { font: 12px "Microsoft Yahei";}
		.bg-color1{
			background-color: #f7faff;
		}
		.stu-info-title {
			line-height: 1rem;
			background: #f7faff;
		}
		
		
				
		.regular-radio {
			display: none;
		}

		.regular-radio + label {
			width: 1rem;
			height: 1rem;
			line-height: 1rem;
			display: table;
			background-color: white;
			color: #36c86b;
			cursor: pointer;
			border:1px solid #36c86b;
			text-align: center;
			 border-radius: 50%;     
			 -moz-border-radius: 50%;      
			 -webkit-border-radius: 50%;
		}

		.regular-radio:checked + label:after {
			width: 1rem;
			height: 1rem;
			display: table;
			background-color: white;
			color: #36c86b;
			cursor: pointer;
			border:1px solid #36c86b;
			text-align: center;
			 border-radius: 50%;     
			 -moz-border-radius: 50%;      
			 -webkit-border-radius: 50%;
		}

		.regular-radio:checked + label {
			width: 1rem;
			height: 1rem;
			display: table;
			background-color: white;
			color: #ffffff;
			cursor: pointer;
			background-color:#36c86b;
			text-align: center;
			 border-radius: 50%;     
			 -moz-border-radius: 50%;      
			 -webkit-border-radius: 50%;
		}
		
		.pre{
			width:100px;
			height:100px;
			position:fixed;
			top:0;
			right:100px;
			transition:left 2s;
			-moz-transition:left2s; /* Firefox 4 */
			-webkit-transition:left 2s; /* Safari and Chrome */
			-o-transition:left 2s; /* Opera */
		}
		.move-left{
			right:100px;
		}
	/* .big-radio + label {
		padding: 0.1rem;
	} */
	</style>

	</head>

	<body class="fadeIn animated">
		<div id="message" v-cloak>
			<div class="grid clearfix pl3 pr3">
				<ul id="category" class="dowebok">
					<li class="mr3 f28" v-for="(item, index) in ques">
						<div :id="getDivId(index)" v-if="item.question_id === question_id">
							<input @click="quesDetails(item)" type="radio" :id="getRadioId(index)" name="radio-2-set" class="regular-radio big-radio"
							 checked /><label :for="getRadioId(index)">第{{index+1}}题</label>
						</div>
						<div :id="getDivId(index)" v-else>
							<input @click="quesDetails(item)" type="radio" :id="getRadioId(index)" name="radio-2-set" class="regular-radio big-radio" /><label
							 :for="getRadioId(index)">第{{index+1}}题</label>
						</div>
					</li>
				</ul>
			</div>

			<div class="grid clearfix">
				<div class="grid  clearfix stu-info-title bg-color1 pl3 pr3">
					<span class="f30" v-if="baseInfo.stem_type == 1">1.单词朗读</span>
					<span class="f30" v-else-if="baseInfo.stem_type == 2">2.单词朗读</span>
					<span class="f30" v-else-if="baseInfo.stem_type == 3">3.回答问题</span>
					<span class="f30" v-else-if="baseInfo.stem_type == 4">4.短文朗读</span>
				</div>
				<div class="grid  clearfix pl3 pr3 f28">
					<div><span>{{baseInfo.title}}</span></div>
					<div><span>{{baseInfo.title_desc}}</span></div>
					<div><span>{{baseInfo.score_desc}}</span></div>
					<div v-if="baseInfo.img !==''"><img :src="baseInfo.img" /></div>

				</div>


			</div>

			<div class="grid clearfix">
				<div class="grid  clearfix stu-info-title bg-color1 pl3 pr3">
					<div class="box col-12 h10 f30"><span class="f30">学生答案</span></div>
				</div>
				<div class="grid  clearfix" style="line-height: 1rem;">
					<div class="grid clearfix" style="background: #FFFFFF;">
						<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">姓名</span></div>
						<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">分数</span></div>
						<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">录音</span></div>
					</div>
				</div>
				<div class="grid  clearfix" style="line-height: 1rem;" v-for="(item, index) in stuList">
					<div class="grid clearfix" style="background: #f7faff;" v-if="index%2 ==0">
						<div class="box col-4 t-c h10 f30" style="color: #343d4a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><span
							 class="f30" style="color: #343d4a;">{{item.username}}</span></div>
						<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.score}}分</span></div>
						<div class="box col-4 t-c h10">
							<!-- <audio :src="item.value" :id="getAudioId(item.question_id)"></audio> -->
							<img src="img/ic_luyingreen.png" :id="getAudioId(item.question_id,index)" class="h5 w5" @click="playAudio(item,index)" />
						</div>
					</div>
					<div class="grid clearfix" style="background: #FFFFFF;" v-else>
						<div class="box col-4 t-c h10 f30" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><span
							 class="f30" style="color: #343d4a;">{{item.username}}</span></div>
						<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.score}}分</span></div>
						<div class="box col-4 t-c h10">
							<!-- <audio :src="item.value" :id="getAudioId(item.question_id)"></audio> -->
							<img src="img/ic_luyingreen.png" :id="getAudioId(item.question_id,index)" class="h5 w5" @click="playAudio(item,index)" />
						</div>
					</div>
				</div>

			</div>
		</div>

	</body>


	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#message',
			data: {
				params: getQueryString("params"),
				ques: [],
				task_id: '',
				baseInfo: [],
				stuList: [],
				id: '',
				question_id: '',
			},
			mounted: function() {
				this.isterminal();
				if (browser.versions.weixin) {
					document.getElementById('JweixinTip').style.display = 'block';
				}
				//具体题目详情+学生列表接口
				// this.contentStuList();
				//考试报告题目分析详情接口
				this.testingAnaly();

			},
			watch: {
				ques() {
					this.$nextTick(function() {
						var index = 0;
						for (var i = 0; i < this.ques.length; i++) {
							if (this.question_id == this.ques[i].question_id) {
								index = i;
							}
						}
						if (index > 4) {
							var $category = document.getElementById("category");
							var divWidth = document.getElementById("div_radio_0");
							var divWidths = divWidth.offsetWidth * (index);
							$category.scrollTo(divWidths, $category.scrollTop);
						}

					});
				}
			},
			methods: {
				//判断 android ios
				isterminal: function() {
					var that = this;
					if (that.isTerminal == 'android') {
						that.isTerminal = 1;
					} else if (that.isTerminal == 'ios') {
						that.isTerminal = 2;
					}
				},
				contentStuList: function(id, question_id) {
					var objParams = {
						task_id: this.task_id,
						stem_id: id,
						id: question_id,
						page: '1',
						dis_num: '200',
					}
					console.log(contentStuListApi)
					console.log(objParams)
					//考试报告试卷分析-成绩分布
					this.$http.post(contentStuListApi, objParams, {
						emulateJSON: true
					}).then(function(res) {
						if (res.data.error_code == 200) {
							this.baseInfo = res.data.data.baseInfo;
							this.stuList = res.data.data.list;
							console.log(this.stuList)
						} else {
							this.baseInfo = [];
							this.stuList = [];
							//请求错误
						}
					}).catch(e => {
						// 打印一下错误
						console.log(e);
					});
				},
				testingAnaly: function() {
					var b = new Base64();
					var str = b.decode(this.params);
					var objParams = JSON.parse(str);
					this.task_id = objParams.task_id;
					this.terminal = objParams.terminal;
					this.id = objParams.id;
					this.question_id = objParams.question_id;

					//考试报告试卷分析-成绩分布
					this.$http.post(testingAnalyApi, objParams, {
						emulateJSON: true
					}).then(function(res) {
						if (res.data.error_code == 200) {
							var examdetails = res.data.data.list;
							for (var i = 0; i < examdetails.length; i++) {
								var queTempList = examdetails[i].list;
								for (var j = 0; j < queTempList.length; j++) {
									var queList = [];
									var queTemp = queTempList[j];
									queList = {
										id: examdetails[i].id,
										question_id: queTemp.question_id,
										score_rate_detail: queTemp.score_rate_detail,
										score_rate_detail: queTemp.score_rate_detail,
									};
									this.ques.push(queList);
								}
							}

						} else {
							//请求错误
							window.android.errorMsg(res.data.info);
						}
					}).catch(e => {
						// 打印一下错误
						console.log(e);
					})

					if (this.id != '' && this.id != undefined && this.question_id != '' && this.question_id != undefined) {
						//具体题目详情+学生列表接口
						this.contentStuList(this.id, this.question_id);
					}

				},
				click_x5: function() {
					if (browser.versions.android) {
						console.log('-------------------打印成功，走了调用安卓分享---------------------');
						AndroidBack.onX5ButtonClicked();
					}
				},
				quesDetails: function(items) {
					//具体题目详情+学生列表接口
					this.contentStuList(items.id, items.question_id);
				},
				getTitle: function(index) {
					return "第" + (index + 1) + "题"
				},
				getAudioId: function(id,index) {
						console.log("audio_img_" + id+"_"+index)
					return "audio_img_" + id+"_"+index
				},
				playAudio: function(item,index) {
					$("#audio_img_" + item.question_id+"_"+index).attr("src", "img/ic_bofanggreen.png");
					
					var audioUrls = item.value;
					var arrUrl = audioUrls.split(",");
					// $("#audio_" + item.question_id)[0].play();
					var arr = []; //把需要播放的歌曲从后往前排，这里已添加两首音乐，可继续添加多个音乐
					for (var i = 0; i < arrUrl.length; i++) {
						arr.push(arrUrl[i]);
					}
					var myAudio = new Audio();
					myAudio.preload = true;
					myAudio.controls = true;
					myAudio.src = arr.pop(); //每次读数组最后一个元素 
					myAudio.addEventListener('ended', playEndedHandler, false);
					myAudio.play();
					myAudio.loop = false; //禁止循环，否则无法触发ended事件 
					function playEndedHandler() {
						myAudio.src = arr.pop();
						myAudio.play();
						!arr.length && myAudio.removeEventListener('ended', playEndedHandler, false); //只有一个元素时解除绑定 
						
						if(!arr.length){
							$("#audio_img_" + item.question_id+"_"+index).attr("src", "img/ic_luyingreen.png");
						}
					}

				},
				getRadioId: function(index) {
					return "radio_" + index + 1;
				},
				getDivId: function(index) {
					return "div_radio_" + index;
				}

			},
			filters: {
				numFilter(value) {
					// 截取当前数据到小数点后三位
					let transformVal = parseFloat(value).toFixed(3)
					let realVal = transformVal.substring(0, transformVal.length - 1)
					if (realVal == 'NaN') {
						realVal = 0;
					}
					// num.toFixed(3)获取的是字符串
					return parseFloat(realVal)
				},
				numLawFilter([num, count]) {
					let law = num / count * 100;
					// 截取当前数据到小数点后三位
					let transformVal = parseFloat(law).toFixed(0);

					if (transformVal == 'NaN') {
						transformVal = 0;
					}
					return parseFloat(transformVal)
				},
				formatUnixtimestamp(value) {
					return formatUnixtimestamp(value);
				}

			}
		});
	</script>

</html>
